« Previous Next »

JavaScript Browser Object Model (BOM) Guide

Overview of Browser Object Model (BOM)

The Browser Object Model (BOM) provides JavaScript with access to browser-specific functions and information, like window control, navigation, and screen properties. The BOM hierarchy is organized around the window object, which represents the browser window itself.

The Window Object

The window object represents the browser window and contains global properties and methods.

  • Global Variables: Any global variable in JavaScript is a property of the window object.
  • Global Functions: Any global function is a method of the window object.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <Script>
            // Accessing global variables through window
            var myVar = "Hello, BOM!";
            console.log(window.myVar);// Output: Hello, BOM!
        </Script>
    </body>
    </html>

Window Size Properties

The window.innerHeight and window.innerWidth properties give the height and width of the browser window in pixels.


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
            <Script>
                // Getting window dimensions
                let height = window.innerHeight;
                let width = window.innerWidth;
                console.log('Height:', height, 'Width:', width);
            </Script>
     </body>
     </html>

Window Methods

The window object has several methods for manipulating the browser window. Note that some of these methods might be restricted by the browser’s popup blocker or security settings.

  • window.open(): Opens a new window.
  • window.close(): Closes the current window.
  • window.moveTo(): Moves the window to specified coordinates.
  • window.resizeTo(): Resizes the window.
// Opening a new window
      window.open('https://example.com', '_blank');
      // Closing the current window (may not work due to browser restrictions)
      window.close();
      // Resizing the current window
      window.resizeTo(800, 600);

The Navigator Object

The navigator object provides information about the browser and the user's environment.

  • navigator.userAgent: Returns the browser's user agent string.
  • navigator.language: Returns the user's language setting.
  • navigator.onLine: Indicates if the browser is online.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        // Navigator properties
        console.log('User Agent:', navigator.userAgent);
        console.log('Language:', navigator.language);
        console.log('Online:', navigator.onLine);
    </Script>
</body>
</html>

The Screen Object

The screen object provides information about the user's screen, such as its width, height, and color depth.

  • screen.width: Width of the screen in pixels.
  • screen.height: Height of the screen in pixels.
  • screen.colorDepth: Number of bits used to display one color.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
        // Screen properties
        console.log('Screen Width:', screen.width);
        console.log('Screen Height:', screen.height);
        console.log('Color Depth:', screen.colorDepth);
    </Script>
</body>
</html>

The Location Object

The location object represents the URL of the current document and provides methods to manipulate the URL.

  • location.href: Returns the current URL.
  • location.reload(): Reloads the current page.
  • location.assign(): Loads a new document.

            
                  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <Script>
    // Location properties and methods
        console.log('Current URL:', location.href);
        location.reload(); // Reloads the page
        location.assign('https://example.com'); // Navigates to a new URL
    </Script>
</body>
</html>

The History Object

The history object represents the browser's session history, which is the pages visited in the browser tab.

  • history.back(): Loads the previous URL in the history list.
  • history.forward(): Loads the next URL in the history list.
  • history.go(): Loads a specific page from the session history.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<Script>
    // Navigating history
    history.back();    // Go to previous page
    history.forward(); // Go to next page
    history.go(-2);    // Go back two pages
</Script>
</body>
</html>
« Previous Next »